<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initialscale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>

<body>
   <div id="app">

        <!-- 2、遍历数据列表 -->
        <table border="1">
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                </tr>
            <!-- <tr v-for="item in userList"></tr> -->
            <tr v-for="item in userList">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            </tr>
        </table>
   </div>
   <script src="vue.min.js"></script>
   <script src="axios.min.js"></script>
   <script>
     new Vue({
         el: '#app',
         //固定结构
         data: { //定义变量和具体的值
            //空数组
            userList:[]
          },
          created() {    //页面渲染之前执行
                //一般调用定义的方法  实际调用
                this.getUserList()
          },
          methods:{//编写具体的方法
                //创建 查询所有用户信息
                getUserList() {

                    //使用axios 发送ajax请求  .xx("请求接口路径")提交方式
                    //                       .then()  请求成功执行then()
                    //                       .catch() 请求失败执行
                    axios.get("data.json")
                        .then(response =>{    //response时请求成功之后返回的数据
                            // console.log(response)

                            this.userList=response.data.data.items //赋值到空数据
                            console.log(this.userList)
                        })
                        .catch(error =>{
                            console.log(error)
                        })
                }
          }
     })
 </script>
</body>

</html>